import { updateLiker }  from '../../services/reviews/fetchReview';

Component({
  options: {
    addGlobalClass: true,
  },

  properties: {
    id: {
      type: String,
      value: '',
      observer(id) {
        this.genIndependentID(id);
        if (this.properties.thresholds?.length) {
          this.createIntersectionObserverHandle();
        }
      },
    },
    data: {
      type: Object,
      observer(data) {
        if (!data) {
          return;
        }
        if (data.liked) {
          this.setData({
            reviews: data,
            icon_name: 'heart-filled',
            icon_color: 'red',
            liked: true,
          });
        } else {
          this.setData({
            reviews: data,
            icon_name: 'heart',
            icon_color: 'black',
            liked: false,
          });
        }

      },
    },
    // liked: {
    //   type: Boolean,
    //   value: false,
    //   observer(liked) {
    //     if (!liked) {
    //       return;
    //     }
    //     this.setData({
    //       liked: liked,
    //     })
    //   }
    // },
    thresholds: {
      type: Array,
      value: [],
      observer(thresholds) {
        if (thresholds && thresholds.length) {
          this.createIntersectionObserverHandle();
        } else {
          this.clearIntersectionObserverHandle();
        }
      },
    },
  },

  data: {
    independentID: '',
    reviews: { id: '' },
    liked: false,
    icon_name: 'heart',
    icon_color: 'black',
  },

  lefttimes: {
    ready() {
      this.init();
    },
    detached() {
      this.clear();
    },
  },

  pageLifeTimes: {},

  methods: {
    clickHandle() {
      this.triggerEvent('click', { reviews: this.data.reviews });
    },

    clickThumbHandle() {
      this.triggerEvent('thumb', { reviews: this.data.reviews });
    },

    likerPlusHandle(e) {
      // todo 这里处理用户点击喜欢小图标后，切换图标，计数，后台缓存等功能
      const { liked, reviews } = this.data;
      let user_id = wx.getStorageSync('user_id');
      let likerNumResult = reviews.likerNum;
      let post_data = {
        reviews_id: reviews.spuId,
        user_id: user_id,
        liker_num: 0,
        method: ''
      };

      if (liked) {
        // minus
        likerNumResult--;
        post_data.liker_num = likerNumResult;
        post_data.method = 'minus';

        reviews.likerNum = likerNumResult;
        this.setData({
          icon_name: 'heart',
          icon_color: 'black',
          liked: false,
          reviews: reviews,
        })
      } else {
        // plus
        likerNumResult++;
        post_data.liker_num = likerNumResult;
        post_data.method = 'plus';

        reviews.likerNum = likerNumResult;
        this.setData({
          icon_name: 'heart-filled',
          icon_color: 'red',
          liked: true,
          reviews: reviews,
        })
      }

      updateLiker(post_data).then((data) => {
        wx.showToast({
          title: "喜欢列表更新",
          icon: "none",
          duration: 2000
        });
      });
    },

    intersectionObserverContext: null,
    createIntersectionObserverHandle() {
      if (this.intersectionObserverContext || !this.data.independentID) {
        return;
      }
      this.intersectionObserverContext = this.createIntersectionObserver({
        thresholds: this.properties.thresholds,
      }).relativeToViewport();

      this.intersectionObserverContext.observe(`#${this.data.independentID}`, (res) => {
        this.intersectionObserverCB(res);
      });
    },

    clearIntersectionObserverHandle() {
      if (this.intersectionObserverContext) {
        try {
          this.intersectionObserverContext.disconnect();
        } catch (e) {}
        this.intersectionObserverContext = null;
      }
    },

    genIndependentID(id) {
      let independentID;
      if (id) {
        independentID = id;
      } else {
        independentID = `reviews-card-${~~(Math.random() * 10 ** 8)}`;
      }
      this.setData({ independentID });
      // console.log(this.data.independentID);
    },

    init() {
      const { thresholds, id } = this.properties;
      this.genIndependentID(id);
      if (thresholds && thresholds.length) {
        this.createIntersectionObserverHandle();
      }
    },

    clear() {
      this.clearIntersectionObserverHandle();
    },

    intersectionObserverCB() {
      this.triggerEvent('ob', {
        reviews: this.data.reviews,
        context: this.intersectionObserverContext,
      });
    },
  },
});
